狀態區與按鈕已經出現在頁面上，今天要用 CSS 把畫面整理成控制台。
前一天完成了 HTML 結構，畫面上已經有標題、OFF 狀態與切換按鈕，但仍是瀏覽器預設排版。
今天只處理外觀的第一步，建立 style.css，讓畫面置中、有背景、有基本操作台的樣子。
HTML 說明頁面有哪些元素，CSS 則決定這些元素如何排列與顯示，將兩者分開後，修改背景或字型時不必重寫標題與按鈕內容。
CSS 透過選擇器找到要套用的元素，今天先使用 body 選擇器，代表規則會套用到整個頁面主體。
瀏覽器會依 HTML 中的 <link> 載入樣式表，因此修改 CSS 後通常只需重新整理頁面，不必改動 MCU 或 Python，若舊外觀仍被保留，可再次整理並確認瀏覽器載入的是目前的 style.css。
先在 assets/index.html 的 <head> 中加入樣式連結。
<head>
<meta charset="utf-8">
<title>智慧路口 Edge Box</title>
<link rel="stylesheet" href="style.css"> <!-- 本日新增 -->
</head>
rel="stylesheet" 表示連結的是樣式表，href="style.css" 指向同一個 assets 資料夾中的檔案，檔名若寫錯，HTML 仍會顯示，但所有 CSS 效果都不會出現。
在 assets/style.css 加入以下內容。
/* 本日新增 */
body {
font-family: sans-serif;
margin: 0;
background: #f5f5f5;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
font-family: sans-serif 使用無襯線字型，margin: 0 移除瀏覽器預設外距，background 設定淺灰背景，height: 100vh 則讓 body 高度等於整個瀏覽器視窗。
這些設定先建立乾淨的操作台底層，狀態文字與按鈕仍維持預設外觀，後續再分別處理。
display: flex 啟用 Flexbox，flex-direction: column 讓元素由上往下排列，因此標題、狀態與按鈕仍保持原有順序。
align-items: center 處理水平方向置中，justify-content: center 處理垂直方向置中，搭配 height: 100vh，整組內容會移到畫面中央。
若沒有設定視窗高度，垂直置中可能看不出效果，因為 body 的高度只等於內容本身，這也是 height 與 Flexbox 必須配合的原因。
可暫時縮小與放大瀏覽器視窗觀察內容位置，標題、狀態與按鈕應持續以整組方式留在中央，而不是依固定座標卡在某個位置，這能確認目前使用的是彈性佈局，而不是只在單一螢幕尺寸下看起來正確。
CSS 語法要完整成對
每一組規則以選擇器與大括號組成，屬性名稱與值之間使用冒號，每行最後以分號結束，漏掉右大括號時，後面的規則也可能一起失效。
顏色 #f5f5f5 使用十六進位表示法，今天只需要知道它是淺灰色背景，不必先加入 ON 與 OFF 的狀態色彩。
重新整理頁面後，標題、OFF 與按鈕應由上往下排列在畫面中央，背景變成淺灰色，頁面四周也不再保留預設空白邊界。
若背景改變但內容沒有垂直置中，先檢查 height: 100vh 與 justify-content: center，若整個 CSS 都沒有作用，則回到 HTML 確認 <link> 的路徑。
本日只改變外觀，點擊按鈕仍不會控制 LED，D9 操作也不會更新畫面，MCU 與 MPU 功能則應持續正常運作。
也可暫時移除 HTML 中的 <link> 再重新整理，畫面應回到預設排版，恢復連結後又重新置中，這項對照測試能證明佈局確實來自外部 CSS，而不是瀏覽器偶然保留的結果。
頁面重新整理後也應維持同一佈局。
assets/style.css。現在管理畫面已經置中並有基本背景，但 ON 與 OFF 還不夠醒目，下一篇要放大狀態文字並用顏色呈現目前號誌狀態。
下一篇｜用顏色讓頁面更醒目
iThome鐵人賽
看影片追技術